import M from './model.js'
import V from './view.js'
import {debounce} from './utils.js'
// 创建canvas节点
function ctrl() {
    // var root = document.getElementById('root')
    var canvasNode = document.querySelector('canvas')
    window.canvasNode = canvasNode
    window.canvas2Dctx = canvasNode.getContext('2d')
    window.vrContainer = document.getElementById('root')
    root.appendChild(canvasNode)

    var C = {
        init(){
            // 绑定事件
            windowEventManager()
            canvasEventManager()
        },
        
    }
    C.init()
}

function windowEventManager(){
    window.onload = function () {
        !(function () {
            window.VRCARCONFIG.picurl.forEach((item, index) => {
                var img = document.createElement('img')
                img.src = item
                img.onload = function () {
                    var picArr = M.getPicArr()
                    picArr[index] = img
                    // console.log(img.width,img.height)
                    if(index===0){
                        setCanvasSize()
                        M.setInitRectangle()
                        M.setMouseEndPosition(window.canvasNode.width/2,window.canvasNode.height/2)
                        V.drawImage()
                    }
                    
                }
            })
        })()

    }
    window.onresize = debounce(resizeFunc,400)
    // createTry1()
    // createTry2()
}

function resizeFunc (e){
    
        setCanvasSize()
        V.drawImage()
    
    
}

function setCanvasSize(){
    window.canvasNode.width = window.vrContainer.offsetWidth
    window.canvasNode.height = window.vrContainer.offsetHeight
    M.setInitRectangle()
}

function canvasEventManager(){

    window.canvasNode.addEventListener('mousedown',function(e){
        M.setMouseDownState(true)
        M.setPointDownPosition(e.offsetX,e.offsetY)
    })
    window.canvasNode.addEventListener('mousemove',function(e){
        var {mouseDownState,scaleFactor} = M.getStateData()
        if(mouseDownState){
            if(scaleFactor<0.75){
                M.setMoveVector(e.offsetX,e.offsetY)
                V.drawImage()
                M.setMoveVectorZero()
                M.setPointDownPosition(e.offsetX,e.offsetY)
            }else{
                V.drawImage()
                console.log('changepic')
            }
            
        }
    })
    window.canvasNode.addEventListener('mouseup',function(e){
        M.setMouseDownState(false)
        M.setMoveVectorZero()
    })
    window.canvasNode.addEventListener('wheel',function(e){
        if(M.getStateData().mouseDownState){
            return
        }
        e.preventDefault()
        M.setScaleFactor(e.deltaY)
        M.setMouseEndPosition(e.offsetX,e.offsetY)
        V.drawImage()
    })
    // var btn1 = document.getElementById('try1')
    // btn1.addEventListener('click',function(){
    //     M.setScaleFactor(-500)
    //     M.setMouseEndPosition(467,786)
    //     V.drawImage()
    // })
    // var btn2 = document.getElementById('try2')
    // btn2.addEventListener('click',function(){
    //     M.setScaleFactor(-500)
    //     M.setMouseEndPosition(764,550)
    //     V.drawImage()
    // })
}
function createTry1(){
    var divEle = document.createElement('div')
    divEle.style.width='5px'
    divEle.style.height='5px'
    divEle.style.position = 'absolute'
    divEle.style.left = '467px'
    divEle.style.top = '786px'
    divEle.style.zIndex = 10
    divEle.style.backgroundColor='red'
    document.body.append(divEle)
}
function createTry2(){
    var divEle = document.createElement('div')
    divEle.style.width='5px'
    divEle.style.height='5px'
    divEle.style.position = 'absolute'
    divEle.style.top = '550px'
    divEle.style.left = '764px'
    divEle.style.zIndex = 10
    divEle.style.backgroundColor='red'
    document.body.append(divEle)
}

ctrl()